<template>
<div id="map" style="width:100vw;height:100vh"></div>
</template>

<script>
import "./../../../public/static/leaflet-draw/leaflet.draw.js";
import "./../../../public/static/leaflet-draw/leaflet.draw.css";
let map = "";
export default {
  data() {
    return {
      map: ""
    };
  },
  mounted() {
    this.loadMap();
  },
  methods: {
    loadMap() {
      map = L.map("map");
      L.tileLayer(
        // 谷歌卫星瓦片
        "https://gac-geo.googlecnapps.cn/maps/vt?lyrs=s,m&gl=CN&x={x}&y={y}&z={z}",

        {
          maxZoom: 18,
          minZoom: 1,
          // attribution: "谷歌地图",
          subdomains: ["1", "2", "3", "4"],
          center: [40.35, 117.36],
          // center: [116.212034, 39.933657],
          zoom: 8
        }
      ).addTo(map);

      map.setView([40.35, 117.36], 7);
      //添加绘制图层
      var drawnItems = new L.FeatureGroup();
      map.addLayer(drawnItems);
      //添加绘制控件
      var drawControl = new L.Control.Draw({
        draw: {
          //绘制线
          polyline: true,
          //绘制多边形
          polygon: true,
          //绘制矩形
          rectangle: true,
          //绘制圆
          circle: true,
          //绘制标注
          marker: true,
          //绘制圆形标注
          circlemarker: true
        },
        edit: {
          //绘制图层
          featureGroup: drawnItems,
          //图形编辑控件
          edit: true,
          //图形删除控件
          remove: true
        }
      });
      //添加绘制控件
      map.addControl(drawControl);
      //绘制事件
      map.on(L.Draw.Event.CREATED, function(e) {
        var type = e.layerType,
          //获取绘制图层
          drawlayer = e.layer;
        if (type === "marker") {
          drawlayer.bindPopup("冒泡冒泡冒泡!");
        }
        drawnItems.addLayer(drawlayer);
      });
    }
  }
};
</script>

<style>
</style>
